<template>
  <ul class="cart-list">
    <li
      class="cart-item"
      v-for="(item, index) in $store.state.cartList"
      :key="index"
    >
      <check-btn
        class="check-btn"
        :isChecked="item.checked"
        @click.native="checkClick(index)"
      />
      <div class="img">
        <img :src="item.img" />
      </div>
      <div class="info">
        <h2 class="title">{{ item.title }}</h2>
        <p class="desc">{{ item.desc }}</p>
        <div class="bottom">
          <span class="price">¥ {{ item.lowNowPrice }}</span>
          <span class="count">{{ item.count }}</span>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
import CheckBtn from "@/components/content/checkBtn/CheckBtn";
export default {
  name: "ShopcartList",
  components: {
    CheckBtn,
  },
  methods: {
    checkClick(index) {
      this.$store.commit("checkClick", index);
    },
  },
};
</script>

<style scoped  lang="less" >
.cart-item {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #ddd;
  padding: 5px 10px;
  .check-btn {
    float: left;
    margin: 50px 5px 0 -5px;
  }
  .img {
    float: left;
    width: 110px;
    height: 110px;
    text-align: center;
    margin-top: 5px;
    img {
      height: 100%;
      border-radius: 10px;
    }
  }
  .info {
    width: 210px;
    height: 120px;
    float: right;
    .title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #333;
      font-size: 17px;
      font-weight: 500;
    }
    .desc {
      text-align: left;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 16px;
      margin: 10px 0 20px 0;
    }
    .price {
      float: left;
      font-weight: 500;
      color: red;
      font-size: 22px;
    }
    .count {
      float: right;
    }
  }
}
</style>